@extends('hrs.layouts.app')  
@section('css')
  <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
   <style>
  
    #container {
      width: 100%;
      height: 600px;
    }

    #map-features .input-item {
      height: 2rem;
    }
  </style>
@endsection         
@section('content')
        
            <div class="container">

              
                <div class="row">
                    <form>
                        <input name="" type="text">
                    </form>
                </div>

                <div class="row card-box">
                      
                     <div id="container"></div>
                          

                </div>
                <!-- end row -->




                

            </div>
       
@endsection

@section('js')
 <script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
  <script src="https://webapi.amap.com/maps?v=1.4.10&key=c5dac0d4761d48c299d7d86a9a84458b"></script>
  <script>
    //初始化地图
    var map = new AMap.Map('container', {
      resizeEnable: true, //是否监控地图容器尺寸变化
      zoom: 11,
      //center: [116.408075, 39.950187],
      features: 'road'
    });

    //经度纬度
        var lnglats = [
            [114.069919,30.564255],
            [114.461307,30.618634],
            [114.509372,30.492096],
            [114.525165,30.742646],
            [114.620609,30.712543],
            [114.547138,30.412779],
            [113.902378,30.396789],
            [114.15163,30.779228],
            [114.676227,30.857067],
            [114.162616,30.96782]
        ];

        var color = [
                        '1.png','1-1.png','1-2.png',
                        '2.png','2-1.png','2-2.png',
                        '3.png','3-1.png','3-2.png',
                        '4.png','4-1.png','4-2.png',
                        '5.png','5-1.png','5-2.png',
                        '6.png','6-1.png','6-2.png'
                    ]
        
        //人员信息
        var student = [
            {name:"张思",age:"22",sex:"女"},
            {name:"李磊",age:"21",sex:"男"},
            {name:"吴雪",age:"22",sex:"女"},
            {name:"思雨",age:"23",sex:"女"},
            {name:"赵华",age:"24",sex:"男"},
            {name:"孙杨",age:"26",sex:"男"},
            {name:"钱思思",age:"20",sex:"女"},
            {name:"郑武",age:"22",sex:"男"},
            {name:"胡迪",age:"21",sex:"男"},
            {name:"司马云",age:"22",sex:"女"}
        ];
        
        //初始化信息窗口
        
        //循环遍历
        for (var i = 0, marker; i < lnglats.length; i++) 
        {
            // 创建一个 icon
            var icon = new AMap.Icon({
                size: new AMap.Size(40, 40),
                image: '/marker/'+color[i],
                imageSize: new AMap.Size(40, 40),
                //imageOffset: new AMap.Pixel(-95, -3)
            });

            var marker = new AMap.Marker({
                position: lnglats[i],
                icon: icon,
                map: map
            });
          
                // 设置label标签
    // label默认蓝框白底左上角显示，样式className为：amap-marker-label
    marker.setLabel({
        //修改label相对于maker的位置
        offset: new AMap.Pixel(-50, 50),
        content: "<div class='info'>"+
                 "<p>xxx服务站</p>"+
                 "<p>距离 xxx2服务站 50公里</p>"+
                 "<p>距离 xxx3服务站 50公里</p>"+
                 "<p></p>"+
                 "</div>"
    });
            // marker.setContent = "人员位置<br><br>姓名："+student[i].name+"<br>年龄："+student[i].age+"<br>性别："+student[i].sex;
           

        }
        
       
        map.setFitView();


    @foreach($areas as $k=>$area)

    @endforeach
  </script>
@endsection

